<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>控制台主页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/admin.css" media="all">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">数据概览</div>
                        <div class="layui-card-body">

                            <div class="layui-carousel layadmin-carousel layadmin-backlog">
                                <div carousel-item>
                                    <ul class="layui-row layui-col-space10">
                                        <li class="layui-col-xs6">
                                            <a href="javascript:;" onclick="layer.tips('不跳转', this, {tips: 3});"
                                               class="layadmin-backlog-body">
                                                <h3>昨日充值</h3>
                                                <p><cite style="color: red">#number(yesterDayCharge/100,"#,##0.00")</cite></p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs6">
                                            <a href="javascript:;" onclick="layer.tips('不跳转', this, {tips: 3});"
                                               class="layadmin-backlog-body">
                                                <h3>昨日付款</h3>
                                                <p><cite style="color: red">#number(yesterDayPay/100,"#,##0.00")</cite></p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs6">
                                            <a href="javascript:;" onclick="layer.tips('不跳转', this, {tips: 3});"
                                               class="layadmin-backlog-body">
                                                <h3>今日充值</h3>
                                                <p><cite style="color: red">#number(todayCharge/100,"#,##0.00")</cite></p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs6">
                                            <a href="javascript:;" onclick="layer.tips('不跳转', this, {tips: 3});"
                                               class="layadmin-backlog-body">
                                                <h3>今日付款</h3>
                                                <p><cite style="color: red">#number(todayPay/100,"#,##0.00")</cite></p>
                                            </a>
                                        </li>

                                    </ul>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">待办事项</div>
                        <div class="layui-card-body">

                            <div class="layui-carousel layadmin-carousel layadmin-backlog">
                                <div carousel-item>
                                    <ul class="layui-row layui-col-space10">
                                        <li class="layui-col-xs6">
                                            <a lay-href="admin/charge/search" lay-attr="#(chargeURL)" class="layadmin-backlog-body">
                                                <h3>充值待审</h3>
                                                <p><cite>#(chargeResult)</cite></p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs6">
                                            <a lay-href="admin/pay/search" lay-attr="#(withdrawURL)" class="layadmin-backlog-body">
                                                <h3>提现待审</h3>
                                                <p><cite>#(withdrawResult)</cite></p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs6">
                                            <a lay-href="admin/pay/search" lay-attr="#(transferURL)" class="layadmin-backlog-body">
                                                <h3>转账待审</h3>
                                                <p><cite>#(transferResult)</cite></p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs6">
                                            <a lay-href="admin/pay/search" lay-attr="#(dfURL)" class="layadmin-backlog-body">
                                                <h3>付款待审</h3>
                                                <p><cite>#(dfResult)</cite></p>
                                            </a>
                                        </li>
                                    </ul>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">钱包总余额：<cite style="color: red">￥#number(walletBalance/100,"#,##0.00")</cite></div>
                        <div class="layui-card-body">
                            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                                 lay-filter="LAY-index-dataview">
                                <div carousel-item id="LAY-index-dataview">
                                    <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>



    </div>
</div>

<script src="/static/layui/layui.js"></script>
<script>
    layui.config({
        base: '../../' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'console'], function () {
        var $ = layui.$;
        $.ajax({
            url: layui.setter.base + 'admin/balanceTop10?' + Math.random(), //实际使用请改成服务端真实接口
            type: "get",
            dataType: "json",
            success: function (res) {
                var names = new Array(), balance = new Array();
                for (var i = 0; i < res.length; i++) {
                    names.push(res[i].accountName);
                    balance.push(res[i].balance);
                }
                showChart(names, balance);
            }
        });
    });

    function showChart(names, balance) {
        // 图表
        layui.use(["carousel", "echarts"],
            function () {
                var $ = layui.$,
                    carousel = layui.carousel,
                    echarts = layui.echarts,
                    chartProps = [{
                        title: {
                            text: "余额TOP10用户",
                            x: "center",
                            textStyle: {fontSize: 14}
                        },
                        tooltip: {
                            trigger: "axis"
                        },
                        legend: {
                            data: ["", ""]
                        },
                        xAxis: [{
                            type: "category",
                            data: names
                        }],
                        yAxis: [{
                            type: "value"
                        }],
                        series: [{
                            name: "金额",
                            type: "bar",
                            data: balance
                        }]
                    }
                    ],
                    divs = $("#LAY-index-dataview").children("div"),
                    divCharts = [],
                    initChart = function (e) {
                        divCharts[e] = echarts.init(divs[e], layui.echartsTheme),
                            divCharts[e].setOption(chartProps[e]),
                            window.onresize = divCharts[e].resize
                    };
                if (divs[0]) {
                    initChart(0);
                    var idx = 0;
                    carousel.on("change(LAY-index-dataview)",
                        function (e) {
                            initChart(idx = e.index)
                        }),
                        layui.admin.on("side",
                            function () {
                                setTimeout(function () {
                                        initChart(idx)
                                    },
                                    300)
                            }),
                        layui.admin.on("hash(tab)",
                            function () {
                                layui.router().path.join("") || initChart(idx)
                            })
                }
            })
    }
</script>
</body>
</html>

